<template>
  <div class="login">
    <el-row>
      <!-- el-row 左右、上下分为 24 份 -->
      <el-col :span="15" :xs="0"></el-col>
      <el-col class="login-right" :span="9" :xs="24">
        <el-form class="login-form" ref="loginDom" :model="loginForm" :rules="loginRules">
          <h3>欢迎！</h3>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" :prefix-icon="User" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" :prefix-icon="Lock" type="password" placeholder="请输入用户密码" clearable show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" size="default" :loading="loading" @click="handleClick">登  录</el-button>
          </el-form-item>
          <el-form-item>
            <div class="login-other">
              <div @click="handleForget">忘记密码</div>
              <div @click="handleRegister">注册账号</div>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { User, Lock } from '@element-plus/icons-vue'
import { validateUsername, validatePassword } from '@/utils'

const $router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const loginForm = ref({
  username: 'admin',
  password: '111111'
})

// 自定义正则校验
const loginDom = ref()
const loginRules = {
  username: [
    {validator: validatorUsername, trigger: 'change'},
  ],
  password: [
    {validator: validatorPassword, trigger: 'change'},
  ],
}

function validatorUsername(rule, value, callback) {
  if (validateUsername(value)) {
    callback()
  } else {
    callback(new Error('用户名长度最短 5 位，最长 9 位！'))
  }
}

function validatorPassword(rule, value, callback) {
  if (validatePassword(value)) {
    callback()
  } else {
    callback(new Error('用户密码长度最短 6 位，最长 12 位！'))
  }
}

// 登录操作
function handleClick() {
  netLogin()
}

async function netLogin() {
  // 表单校验通过再请求
  await loginDom.value.validate()

  loading.value = true
  try {
    await userStore.netLogin(loginForm.value)
    $router.replace('/')
    loading.value = false
    ElNotification({
      type: 'success',
      message: '登录成功！'
    })
  } catch (error) {
    loading.value = false
    ElMessage({
      type: 'error',
      grouping: true,
      message: error.message
    })
  }
}

function handleForget() {
  $router.push('/forget')
}

function handleRegister() {
  $router.push('/register')
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/login-bg.svg") no-repeat;
  background-size: contain;

  .login-right {
    display: flex;
    justify-content: center;
    height: 100vh;
    background: #fff;

    .login-form {
      position: relative;
      padding: 30px 35px;
      top: 30vh;
      width: 320px;
      height: 270px;
      border: rgba(48, 125, 232, 0.5) solid 1px;

      h3 {
        margin-bottom: 25px;
        color: #307DE8;
        font-size: 25px;
      }

      .login-btn {
        width: 100%;
      }

      .login-other {
        display: flex;
        justify-content: space-between;
        margin-top: -10px;
        width: 100%;
        color: #dcdfe6;
        cursor: pointer;
      }
    }
  }
}
</style>